<template>
  <el-dialog
    :visible.sync="visible"
    title="详情"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      :label-width="$i18n.locale === 'en-US' ? '100px' : '100px'"
    >
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="发票名称:">
            <p class="txt">{{ dataForm.invoiceName || "" }}</p>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发票抬头:">
            <p class="txt">{{ dataForm.invoiceTitle || "" }}</p>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="抬头类型:">
            <p class="txt">
              {{ dataForm.type == 1 ? "个人/非企业单位" : "企业" }}
            </p>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发票金额:">
            <p class="txt">{{ dataForm.invoicePrice || "" }}</p>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开票时间:">
            <p class="txt">{{ dataForm.invoiceDate || "" }}</p>
          </el-form-item>
        </el-col>
        <template v-if="dataForm.type == 0">
          <el-col :span="8">
            <el-form-item label="税号:">
              <p class="txt">{{ dataForm.taxNumber || "" }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户银行:">
              <p class="txt">{{ dataForm.depositBank || "" }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行账号:">
              <p class="txt">{{ dataForm.bankAccount || "" }}</p>
            </el-form-item>
          </el-col>
         
          <el-col :span="8">
            <el-form-item label="单位电话号码:">
              <p class="txt">{{ dataForm.unitPhone || "" }}</p>
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="单位地址:">
              <p class="txt">{{ dataForm.unitAddress || "" }}</p>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        bankAccount: "",
        depositBank: "",
        id: "",
        invoiceDate: "",
        invoiceName: "",
        invoicePrice: 0,
        invoiceTitle: "",
        status: 0,
        taxNumber: "",
        type: 0,
        unitAddress: "",
        unitPhone: "",
      },
    };
  },
  created() {},
  computed: {},
  methods: {
    init() {
      this.visible = true;
      this.dataForm.goodsType = this.goodsType;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        this.getInfo();
      });
    },
    getInfo() {
      this.$http
        .get("/api/isinvoice/" + this.dataForm.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
</style><style lang="scss" scoped>
::v-deep.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 336px;
}

// .aui-content .ql-container {
//     height: auto;
// }

.listItem,
.listItem2 {
  display: grid;
  margin-bottom: 10px;
  gap: 0 20px;
  grid-template-columns: 300px 200px 200px 40px;
}

.listItem2 {
  grid-template-columns: 200px 200px auto 40px;
}

::v-deep.avatar-uploader .el-upload {
  border: 0;
}

::v-deep.el-time-spinner__wrapper {
  width: 50% !important;

  &:last-child {
    display: none;
  }
}
</style>
